<template>
  <a-spin size="large" :spinning="spinning" class="spin-view">
    <XTModuleWorkflowEditor :flow-data="flowData" @onSaveFn="onSaveFn"></XTModuleWorkflowEditor>
  </a-spin>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { message } from "ant-design-vue"
import XTModuleWorkflowEditor from "@/components/Business/XTModuleWorkflowEditor/XTModuleWorkflowEditor.vue"

// 初始化数据
const flowData = reactive({
  statusList: [],
  grapInitData: {},
})

setTimeout(() => {
  //ajax1
  // flowData.grapInitData = {"cells":[{"position":{"x":380,"y":150},"size":{"width":75.25,"height":35},"attrs":{"text":{"fontSize":12,"fill":"#fff","text":"进行中"},"body":{"rx":20,"ry":26,"fill":"#d11fc2","strokeWidth":1,"stroke":"#ffffff"},"top":{"stroke":"#ffffff"}},"visible":true,"shape":"rect","id":"3c575035-ebef-4827-b5ee-0d3a96d7a748","uuid":"uuid-1001","data":{"id":1001,"status":1,"type":"进行中","label":"进行中","background":"gold"},"ports":{"groups":{"top":{"position":"top","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"right":{"position":"right","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"bottom":{"position":"bottom","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"left":{"position":"left","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}}},"items":[{"group":"top","id":"1863fa97-f31f-45bd-8346-1974abcc4430"},{"group":"right","id":"e50bc527-c44b-4cab-8de3-3ae19971fb4f"},{"group":"bottom","id":"90da6ab1-9e32-4958-b560-c8a0ec785949"},{"group":"left","id":"bee7451f-3ff1-4a5e-bb32-24534fead28a"}]},"zIndex":1},{"position":{"x":712,"y":150},"size":{"width":75.25,"height":35},"attrs":{"text":{"fontSize":19,"fill":"#fff","text":"关闭"},"body":{"rx":20,"ry":26,"fill":"#24b47e","strokeWidth":1,"stroke":"#ccc"}},"visible":true,"shape":"rect","id":"5702167d-3f4f-4aa3-b5c3-da23d0ec33d1","uuid":"uuid-1004","data":{"id":1004,"status":4,"type":"关闭","label":"关闭","background":"#24b47e"},"ports":{"groups":{"top":{"position":"top","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"right":{"position":"right","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"bottom":{"position":"bottom","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}},"left":{"position":"left","attrs":{"circle":{"r":4,"magnet":true,"stroke":"#5F95FF","strokeWidth":1,"fill":"#fff","style":{"visibility":"hidden"}}}}},"items":[{"group":"top","id":"8cce0d0a-5977-4760-96dd-efdf52e8c106"},{"group":"right","id":"fd4ac793-2875-4f09-978d-7e9b5fc2c79f"},{"group":"bottom","id":"eb00b329-efd0-4245-af3d-438b7a4444bd"},{"group":"left","id":"b405f388-698c-4f6a-b7c0-65bf25cccfbe"}]},"zIndex":2}]}

  flowData.graphInitData = {
    cells: [
      {
        shape: "edge",
        attrs: { line: { stroke: "#A2B1C3", strokeWidth: 1, targetMarker: { name: "block", width: 12, height: 8 } } },
        id: "24a91cc5-5fb0-4798-ac15-dc03c660e55e",
        zIndex: 0,
        source: { cell: "037fd125-3353-4827-a42b-cf721b304abf", port: "60d5ac00-f470-42a1-9707-036067146b03" },
        target: { cell: "c570f105-1038-43d2-893f-c1113a321c44", port: "9274bfe0-9bb0-400a-ac7b-892786ab1cd7" },
      },
      {
        shape: "edge",
        attrs: { line: { stroke: "#A2B1C3", strokeWidth: 1, targetMarker: { name: "block", width: 12, height: 8 } } },
        id: "b1813aff-b8ea-425e-a194-011a924d1a80",
        zIndex: 0,
        source: { cell: "c570f105-1038-43d2-893f-c1113a321c44", port: "dc899439-4edf-4703-b68a-1ad65513241d" },
        target: { cell: "af40b938-3e9b-4b52-bf95-64d79360e0c8", port: "42fbd4fe-5a39-4cab-959e-7a7b32c578c6" },
      },
      {
        shape: "edge",
        attrs: { line: { stroke: "#A2B1C3", strokeWidth: 1, targetMarker: { name: "block", width: 12, height: 8 } } },
        id: "32d8b54a-9919-4cb0-8a6d-2a4a83674dd2",
        zIndex: 0,
        source: { cell: "c570f105-1038-43d2-893f-c1113a321c44", port: "dc899439-4edf-4703-b68a-1ad65513241d" },
        target: { cell: "af511811-eb8c-49a7-bf78-0b423a1eede1", port: "419600c5-5731-440b-a2ee-f90431eb087a" },
      },
      {
        position: { x: 130, y: 100 },
        size: { width: 75.25, height: 35 },
        attrs: { text: { fontSize: 12, fill: "#fff", text: "未开始" }, body: { rx: 20, ry: 26, fill: "#cf93d9", strokeWidth: 1, stroke: "#ccc" } },
        visible: true,
        shape: "rect",
        id: "037fd125-3353-4827-a42b-cf721b304abf",
        uuid: "uuid-0",
        data: { id: 0, status: 0, type: "未开始", label: "未开始", background: "#5ca5ea" },
        ports: {
          groups: {
            top: { position: "top", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            right: { position: "right", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            bottom: { position: "bottom", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            left: { position: "left", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
          },
          items: [
            { group: "top", id: "6d8e53ae-14f3-4caa-8f16-c0c1d3dee29c" },
            { group: "right", id: "60d5ac00-f470-42a1-9707-036067146b03" },
            { group: "bottom", id: "f635f948-49f1-4648-82a5-3525de11dfd9" },
            { group: "left", id: "e99a7098-d90b-4717-8939-54a351a0fe58" },
          ],
        },
        zIndex: 1,
      },
      {
        position: { x: 413, y: 100 },
        size: { width: 75.25, height: 35 },
        attrs: { text: { fontSize: 12, fill: "#fff", text: "进行中" }, body: { rx: 20, ry: 26, fill: "#83c683", strokeWidth: 1, stroke: "#ccc" } },
        visible: true,
        shape: "rect",
        id: "c570f105-1038-43d2-893f-c1113a321c44",
        uuid: "uuid-1001",
        data: { id: 1001, status: 1, type: "进行中", label: "进行中", background: "gold" },
        ports: {
          groups: {
            top: { position: "top", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            right: { position: "right", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            bottom: { position: "bottom", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            left: { position: "left", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
          },
          items: [
            { group: "top", id: "014b5a82-99bb-4084-8fda-08bb7c36fcad" },
            { group: "right", id: "dc899439-4edf-4703-b68a-1ad65513241d" },
            { group: "bottom", id: "ff929476-95a3-46aa-a9af-f9bc06196f63" },
            { group: "left", id: "9274bfe0-9bb0-400a-ac7b-892786ab1cd7" },
          ],
        },
        zIndex: 2,
      },
      {
        position: { x: 710, y: 30 },
        size: { width: 75.25, height: 35 },
        attrs: { text: { fontSize: 12, fill: "#fff", text: "已完成" }, body: { rx: 20, ry: 26, fill: "#8e24aa", strokeWidth: 1, stroke: "#ffffff" }, top: { stroke: "#ffffff" } },
        visible: true,
        shape: "rect",
        id: "af40b938-3e9b-4b52-bf95-64d79360e0c8",
        uuid: "uuid-1002",
        data: { id: 1002, status: 2, type: "已完成", label: "已完成", background: "#24b47e" },
        ports: {
          groups: {
            top: { position: "top", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            right: { position: "right", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            bottom: { position: "bottom", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            left: { position: "left", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
          },
          items: [
            { group: "top", id: "bc17be4c-14f5-43fb-9ef2-b45b31ddaead" },
            { group: "right", id: "a93de0bc-abfc-4ee3-abd6-b0a25c9a02bb" },
            { group: "bottom", id: "1385a74e-1f76-47ed-8b98-ee1c877a61f4" },
            { group: "left", id: "42fbd4fe-5a39-4cab-959e-7a7b32c578c6" },
          ],
        },
        zIndex: 3,
      },
      {
        position: { x: 710, y: 166 },
        size: { width: 75.25, height: 35 },
        attrs: { text: { fontSize: 12, fill: "#fff", text: "关闭" }, body: { rx: 20, ry: 26, fill: "#f5511e", strokeWidth: 1, stroke: "#ccc" } },
        visible: true,
        shape: "rect",
        id: "af511811-eb8c-49a7-bf78-0b423a1eede1",
        uuid: "uuid-1004",
        data: { id: 1004, status: 4, type: "关闭", label: "关闭", background: "#24b47e" },
        ports: {
          groups: {
            top: { position: "top", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            right: { position: "right", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            bottom: { position: "bottom", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
            left: { position: "left", attrs: { circle: { r: 4, magnet: true, stroke: "#5F95FF", strokeWidth: 1, fill: "#fff", style: { visibility: "hidden" } } } },
          },
          items: [
            { group: "top", id: "419600c5-5731-440b-a2ee-f90431eb087a" },
            { group: "right", id: "9922782c-b070-4df2-84d4-85c035c8f80d" },
            { group: "bottom", id: "92094a93-42c9-4ba9-a76b-c9631e03c542" },
            { group: "left", id: "7fd840f1-06ab-4718-a85b-10d411ba7c7a" },
          ],
        },
        zIndex: 4,
      },
    ],
  }
}, 1000 * 2)

setTimeout(() => {
  // ajax2
  flowData.statusList = [
    {
      id: 0,
      status: 0,
      type: "未开始",
      label: "未开始",
      background: "#5ca5ea",
    },
    {
      id: 1001,
      status: 1,
      type: "进行中",
      label: "进行中",
      background: "gold",
    },
    {
      id: 1002,
      status: 2,
      type: "已完成",
      label: "已完成",
      background: "#24b47e",
    },
    {
      id: 1003,
      status: 3,
      type: "驳回",
      label: "驳回",
      background: "#5ca5ea",
    },
    {
      id: 1004,
      status: 4,
      type: "关闭",
      label: "关闭",
      background: "#24b47e",
    },
    {
      id: 0,
      status: 0,
      type: "未开始",
      label: "未开始",
      background: "#5ca5ea",
    },
    {
      id: 1001,
      status: 1,
      type: "进行中",
      label: "进行中",
      background: "gold",
    },
    {
      id: 1002,
      status: 2,
      type: "已完成",
      label: "已完成",
      background: "#24b47e",
    },
    {
      id: 1003,
      status: 3,
      type: "驳回",
      label: "驳回",
      background: "#5ca5ea",
    },
    {
      id: 1004,
      status: 4,
      type: "关闭",
      label: "关闭",
      background: "#24b47e",
    },
    {
      id: 0,
      status: 0,
      type: "未开始",
      label: "未开始",
      background: "#5ca5ea",
    },
    {
      id: 1001,
      status: 1,
      type: "进行中",
      label: "进行中",
      background: "gold",
    },
    {
      id: 1002,
      status: 2,
      type: "已完成",
      label: "已完成",
      background: "#24b47e",
    },
    {
      id: 1003,
      status: 3,
      type: "驳回",
      label: "驳回",
      background: "#5ca5ea",
    },
    {
      id: 1004,
      status: 4,
      type: "关闭",
      label: "关闭",
      background: "#24b47e",
    },
    {
      id: 0,
      status: 0,
      type: "未开始",
      label: "未开始",
      background: "#5ca5ea",
    },
    {
      id: 1001,
      status: 1,
      type: "进行中",
      label: "进行中",
      background: "gold",
    },
    {
      id: 1002,
      status: 2,
      type: "已完成",
      label: "已完成",
      background: "#24b47e",
    },
    {
      id: 1003,
      status: 3,
      type: "驳回",
      label: "驳回",
      background: "#5ca5ea",
    },
    {
      id: 1004,
      status: 4,
      type: "关闭",
      label: "关闭",
      background: "#24b47e",
    },
    {
      id: 0,
      status: 0,
      type: "未开始",
      label: "未开始",
      background: "#5ca5ea",
    },
    {
      id: 1001,
      status: 1,
      type: "进行中",
      label: "进行中",
      background: "gold",
    },
    {
      id: 1002,
      status: 2,
      type: "已完成",
      label: "已完成",
      background: "#24b47e",
    },
    {
      id: 1003,
      status: 3,
      type: "驳回",
      label: "驳回",
      background: "#5ca5ea",
    },
    {
      id: 1004,
      status: 4,
      type: "未完成",
      label: "未完成",
      background: "#09fdc3",
    },
  ]
}, 1000 * 1)

const spinning = ref(false)
/**
 * 保存数据
 * @param data 要保存的数据
 * @returns void;
 */
const onSaveFn = (data: object): void => {
  // ajax
  spinning.value = true
  console.log(data)
  console.log(JSON.stringify(data))

  setTimeout(() => {
    spinning.value = false
    message.success("保存成功")
  }, 1000 * 3)
}
</script>

<style scoped lang="less"></style>
